<template>
	<view class="login">
		<text class="skip" @click="skip">
			跳过
		</text>
		<br>
		<view class="title">
			易粤语
		</view>
		<view class="form">
			<view class="input">
				<u-input v-model="username" type="text" border="surround" clearable placeholder="请输入账号" />
			</view>
			<view class="input">

				<u-input v-model="password" type="password" border="surround" password-icon clearable
					placeholder="请输入密码" />
			</view>
			<view class="button">
				<u-button type="primary" @click="login" ripple>登陆</u-button>
			</view>
		</view>
		<view class="register">
			<text @click="register">注册</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "",
				password: ""
			};
		},
		methods: {
			skip() {
				uni.switchTab({
					url: "../home/home"
				})
			},
			login() {
				uni.request({
					header: {
						'content-type': 'application/json'
					},
					url: "http://127.0.0.1:8000/login/",
					method: "POST",
					data: {
						"username": this.username,
						"password": this.password
					},
					success: (res) => {
						let data = res.data
						if (data.code === 1) {
							uni.setStorageSync("token", data.data.token)
							uni.setStorageSync("username", data.data.username)
							uni.switchTab({
								url: "../home/home"
							})
						} else {
							uni.showModal({
								content: data.errors,
								showCancel: false
							});

						}
					},
					fail: (err) => {
						uni.showModal({
							content: "服务器异常",
							showCancel: false
						});

					}
				})

			},
			register() {
				// console.log("注册")
				uni.navigateTo({
					url: "../register/register"
				})
			},
		},
		onLoad() {
			let token = uni.getStorageSync("token")
			if (token !== "") {
				uni.switchTab({
					url: '/pages/home/home',
				})
			}
		}
	}
</script>

<style lang="scss">
	.login {
		.skip {
			margin-left: 650rpx;
			font-size: 30rpx;
			// background-color: black;
			color: #C0C4CC;
		}

		.title {
			text-align: center;
			margin: 30rpx auto;
			font-size: 50rpx;
			font-weight: bold;
		}

		.form {
			width: 100%;
			// height: 50vh;
			text-align: center;

			// background-color: #eee;
			.input {
				padding-top: 40px;
				margin: 0 20px;
			}

			.button {
				width: 500rpx;
				margin: 50px auto;
			}
		}

		.register {
			margin-top: 10px;
			margin-left: 30px;
			color: #303133;
			font-size: 30rpx;

		}
	}
</style>
